<template>
  <div class="app-content-wrap" :style="'minHeight:' + gHeight + 'px;'">
    <div class="g-content-title">设备详情</div>
    <div class="app-detail">
      <el-row :gutter="20">
        <el-col>
          <el-col :span="3">
            <div class="grid-content app-detail-title">设备编号</div>
          </el-col>
          <el-col :span="21">
            <div class="grid-content app-detail-cont">{{ detailData.equipmentId }}</div>
          </el-col>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-col :span="3">
            <div class="grid-content app-detail-title">所属</div>
          </el-col>
          <el-col :span="9">
            <div class="grid-content app-detail-cont">{{ fullAreaName }}</div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content app-detail-title">场景</div>
          </el-col>
          <el-col :span="9">
            <div class="grid-content app-detail-cont">{{ fullModuleName }}</div>
          </el-col>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-col :span="3">
            <div class="grid-content app-detail-title">设备型号</div>
          </el-col>
          <el-col :span="21">
            <div class="grid-content app-detail-cont">{{ detailData.equipmentModel }}</div>
          </el-col>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-col :span="3">
            <div class="grid-content app-detail-title">设备类型</div>
          </el-col>
          <el-col :span="21">
            <div class="grid-content app-detail-cont">{{ detailData.equipmentType }}</div>
          </el-col>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-col :span="3">
            <div class="grid-content app-detail-title">设备名称</div>
          </el-col>
          <el-col :span="21">
            <div class="grid-content app-detail-cont">{{ detailData.equipmentName }}</div>
          </el-col>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-col :span="3">
            <div class="grid-content app-detail-title">制造商</div>
          </el-col>
          <el-col :span="21">
            <div class="grid-content app-detail-cont">{{ detailData.equipmentMaker }}</div>
          </el-col>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-col :span="3">
            <div class="grid-content app-detail-title">设备状态</div>
          </el-col>
          <el-col :span="21">
            <div class="grid-content app-detail-cont">{{ detailData.equipmentState == 1 ? "开启" : "关闭"}}</div>
          </el-col>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-col :span="3">
            <div class="grid-content app-detail-title">区域1</div>
          </el-col>
          <el-col :span="9">
            <div class="grid-content app-detail-cont">{{ detailData.area1}}</div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content app-detail-title">区域2</div>
          </el-col>
          <el-col :span="9">
            <div class="grid-content app-detail-cont">{{ detailData.area2}}</div>
          </el-col>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-col :span="3">
            <div class="grid-content app-detail-title">地址</div>
          </el-col>
          <el-col :span="21">
            <div class="grid-content app-detail-cont">{{ detailData.equipmentAddr}}</div>
          </el-col>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-col :span="3">
            <div class="grid-content app-detail-title">位置</div>
          </el-col>
          <el-col :span="9">
            <div class="grid-content app-detail-cont">经度:{{ detailData.gpsLng }}, 纬度{{ detailData.gpsLat }}
              <el-button class="detail-showMap" type="text" icon="el-icon-location" @click="showMap(detailData.gpsLng, detailData.gpsLat, detailData.mapType)">地图位置
              </el-button>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="grid-content app-detail-cont"></div>
          </el-col>
        </el-col>
      </el-row>
    </div>
    <el-dialog custom-class="pic-popup" :visible.sync="mapVisible">
      <mapSelect :LngLat="lngLat" :MapClick="mapClick"></mapSelect>
    </el-dialog>
  </div>
</template>
<script>
import mapSelect from '../../components/common/ui/mapSelect'

export default {
  name: 'deviceEdit',
  components: {
    mapSelect
  },
  data () {
    return {
      gHeight: this.$store.state.gHeight,
      id: this.$route.query.id, // 根据id判断是 新增设备(没有id)) / 编辑设备(有id)
      detailData: {
        equipmentId: '', // 设备编号
        equipmentModel: '', // 设备型号
        equipmentType: '', // 设备类型
        equipmentName: '', // 设备名称
        equipmentState: '', // 设备状态
        moduleId: '', // 场景
        areaId: '', // 所属
        equipmentMaker: '', // 制造商
        area1: '', // 区域1
        area2: '', // 区域2
        equipmentAddr: '', // 地址
        gpsLng: '', // 经度
        gpsLat: '' // 纬度
      },
      fullModuleName: '', // 场景全名
      fullAreaName: '', // 所属全名
      stateArr: [], // 设备状态 开、关
      mapVisible: false, // 地图是否显示
      mapClick: false, // 地图标注点是否可切换
      lngLat: { lng: 121.423224, lat: 31.223914 } // 地图标注点的位置
    }
  },
  mounted () {
    this.handleInit()
  },
  computed: {},
  watch: {},
  methods: {
    // page init
    handleInit () {
      // 如果有传id走编辑设备流程
      this.handleGetCurrentDeviceInfo()
    },
    // 拉取当前设备信息
    handleGetCurrentDeviceInfo () {
      if (this.id) {
        let url = this.$base.getUrl('getEquipmentInfoByNo')
        let params = {
          url: url,
          data: {
            equipmentNo: this.id
          }
        }
        this.$store.dispatch('getForm', params).then(res => {
          if (res) {
            Object.assign(this.detailData, res)
            let areaName1 = res.areaName1 || ''
            let areaName2 = res.areaName2 ? (' - ' + res.areaName2) : ''
            let areaName3 = res.areaName3 ? (' - ' + res.areaName3) : ''
            this.fullAreaName = areaName1 + areaName2 + areaName3
            let moduleName1 = res.moduleName1 || ''
            let moduleName2 = res.moduleName2 ? (' - ' + res.moduleName2) : ''
            this.fullModuleName = moduleName1 + moduleName2
          }
        })
      }
    },
    showMap (lng, lat, type) {
      this.mapVisible = true
      let arr = this.$base.transCoordinate(lng, lat, type)
      this.lngLat.lng = arr[0].toFixed(6)
      this.lngLat.lat = arr[1].toFixed(6)
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.name !== 'deviceSearch') {
      this.$store.commit('keepOut')
    }
    next()
  }

}
</script>
<style scoped>
  .el-dialog__wrapper >>> .pic-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    margin: 0;
  }

  .el-dialog__wrapper >>> .el-dialog__body {
    padding: 20px;
  }

  .el-dialog__wrapper >>> .el-dialog__header {
    padding: 10px 20px 10px;
  }

  .el-dialog__wrapper >>> .el-dialog__headerbtn {
    top: 10px;
  }

  .detail-showMap {
    margin-left: 20px;
  }
</style>
